import React, { useEffect, useRef, useState } from 'react'
import Navbar from '../../components/navbar/navbar'
import List from '../../components/List/list'
import Earth from '../../components/earth/earth'
import './index.scss'
import * as echarts from 'echarts';
import moment from 'moment'
import { CapsuleChart, ScrollBoard } from '@jiaminghi/data-view-react'
import { getMyLeftCen, getMyLeftFoot, getMyRightTop, getMyRightFoot } from '../../api';


function index() {
  // 实时用电
  const leftTwo = useRef(null)
  const [option, setOption] = useState(
    {
      backgroundColor: "#05224d",
      tooltip: {
      },
      grid: {
        top: '8%',
        left: '1%',
        right: '1%',
        bottom: '8%',
        containLabel: true,
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: { //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: '#f9f9f9'
          },
        },
        axisLabel: { //坐标轴刻度标签的相关设置
          textStyle: {
            color: '#d1e6eb',
            margin: 1,
          },
        },
        axisTick: { show: false, },
        data: ['6.1', '6.2', '6.3', '6.4', '6.5', '6.6', '6.7', '6.8', '6.9'],

      }],
      yAxis: [{
        type: 'value',
        min: 100,
        max: 1000,
        splitNumber: 7,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#233e64'
          }
        },
        axisLine: { show: false, },
        axisLabel: {
          margin: 20,
          textStyle: {
            color: '#6a9cd5',

          },
        },
        axisTick: { show: false, },
      }],
      series: [{
        name: '实时用电',
        type: 'line',
        smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 3,

        lineStyle: {
          normal: {
            color: "rgba(255,0,88)"   // 线条颜色
          }
        },
        areaStyle: { //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(255,0,88, 0.9)' },
              { offset: 0.7, color: 'rgba(255,0,88, 0)' }
            ], false),

            shadowColor: 'rgba(255,0,8, 0.9)', //阴影颜色
            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        data: [100, 95, 54, 135, 30, 92, 138, 102, 99]
      }]
    }
  )
  //场地使用
  const leftThree = useRef(null)
  const [option1, setOption1] = useState({
    backgroundColor: '#18163B',
    grid: {
      top: '15%',
      right: '3%',
      left: '5%',
      bottom: '12%'
    },
    xAxis: [{
      type: 'category',
      color: '#59588D',
      data: ['111', '222', '333', '444', '555'],
      axisPointer: {
        type: 'line'
      },
      axisLine: {
        lineStyle: {
          color: '#272456'
        }
      },
      axisLabel: {
        margin: 20,
        color: '#59588D',
        textStyle: {
          fontSize: 12
        },
      },
    }],
    yAxis: [{
      min: 0,
      max: 100,
      axisLabel: {
        formatter: '{value}%',
        color: '#59588D',
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#272456'
        }
      }
    }],
    series: [{
      type: 'bar',
      data: [100, 90, 50, 56, 89],
      barWidth: '20px',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(161,11,225)' // 0% 处的颜色
          },
          {
            // 89,37,255
            offset: 0.5,
            color: 'rgba(89,37,255)' // 50% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(48,53,225)' // 100% 处的颜色
          }], false),
          barBorderRadius: [30, 30, 0, 0],
          // shadowColor: 'rgba(0,255,225,1)',
          // shadowBlur: 4,
        }
      },
    }]
  })
  // 设备检测
  const [config, setConfig] = useState({
    data: [
      {
        name: '南阳',
        value: 167
      },
      {
        name: '周口',
        value: 123
      }
    ],
    colors: ['#0f0', '#f0f'],
    showValue: true
  })
  const [config1, setConfing1] = useState({
    header: ['序号', '设备名称', '设备状态'],
    data: [
      ['1', '111', '开启'],
      ['2', '222', '关闭'],
      ['3', '333', '开启'],
      ['4', '444', '关闭'],
      ['5', '555', '开启']
    ],
    index: true,
    columnWidth: [50],
    align: ['center']
  })

  // 实时警报
  const [config2, setConfig2] = useState({
    header: ['序号', '楼号', '设备状态'],
    data: [
      ['1', '一号楼', '摄像头灭火报警'],
      ['2', '一号楼', '摄像头灭火报警'],
      ['3', '一号楼', '摄像头灭火报警'],
      ['4', '一号楼', '摄像头灭火报警'],
      ['5', '一号楼', '摄像头灭火报警'],
      ['6', '一号楼', '摄像头灭火报警']
    ],
    index: true,
    columnWidth: [50],
    align: ['center']
  })



  // 实时用电
  useEffect(() => {
    getMyLeftCen().then(res => {
      console.log('实时用电', res.data.data);
      let LeftCen = res.data.data.map((item: any) => {
        return item.value
      })
      let timer = -2
      let XData: any = []
      for (let a = 0; a <= 12; a++) {
        timer += 2;
        XData.push(timer + ':00')
      }
      console.log(XData);
      option.series[0].data = LeftCen
      console.log(option.series[0].data, '111');
      option.xAxis[0].data = XData

      setOption(JSON.parse(JSON.stringify(option)))
      var myChart = echarts.init(leftTwo.current);
      myChart.setOption(option);
    })

    //场地使用
    getMyLeftFoot().then(res => {
      console.log('场地使用', res);
      option1.xAxis[0].data = res.data.data.map((item: { title: any; }) => {
        return item.title
      })
      option1.series[0].data = res.data.data.map((item: { value: any; }) => {
        return item.value
      })
      setOption1(JSON.parse(JSON.stringify(option1)))
      var myChart = echarts.init(leftThree.current);
      myChart.setOption(option1);
    })

    //设备检测
    getMyRightTop().then(res => {
      console.log('设备检测', res.data.data);
      config1.data = res.data.data.map((item: any) => {
        return [
          item.ettg_serial,
          item.ettg_type,
          // item.ettg_status
           `${item.ettg_status == '开启' ? `<img src="/src/assets/image/Icon_开关_On.png" alt="" />` : '<img src="/src/assets/image/Icon_开关_Off.png" alt="" />'}`
        ]
      })
      setConfing1(JSON.parse(JSON.stringify(config1)))
    })
    // 实时警告
    getMyRightFoot().then((res: any) => {
      console.log('实时警告',res.data.data);
      config2.data = res.data.data.map((item:any)=>{
        return [
          item.serial,
          item.clpe_place,
          item.clpe_collPolice
        ]
      })
      setConfig2(JSON.parse(JSON.stringify(config2)))
    })
  }, [])
  return (
    <div className='box3'>
      <div className="left">
        <div className="left_top">
          <List title='设备设计'></List>
          <div className="left_one">
            <div>
              <img src="src/assets/image/Photo_设备运维_监控.png" alt="" />
              <br />
              <span>监控类</span>
            </div>
            <div>
              <img src="src/assets/image/Photo_设备运维_消防.png" alt="" />
              <br />
              <span>消防类</span>
            </div>
            <div>
              <img src="src/assets/image/Photo_设备运维_其它.png" alt="" />
              <br />
              <span>其他类</span>
            </div>
          </div>
        </div>
        <div className="left_cent">
          <List title='实时用电'></List>
          <div className="imgs">
            <img src="src/assets/image/a1.png" alt="" />
            <img src="src/assets/image/a1.png" alt="" />
          </div>
          <div className="left_two" ref={leftTwo}>

          </div>
        </div>
        <div className="left_foot">
          <List title='场地使用 '></List>
          <div className="left_three" ref={leftThree}>

          </div>
        </div>
      </div>
      <div className="center">
        {/* <Map></Map> */}
          <Earth></Earth>
        <Navbar></Navbar>
      </div>
      <div className="right">
        <div className="right_top">
          <List title='设备检测'></List>
          <div className="right_one" >
            <div className='qq'>
              <img src="src/assets/image/Photo_设备运维_设备检测.png" alt="" />
              <div className='CapsuleChart'>
                <CapsuleChart config={config} />
              </div>
            </div>

          </div>
        </div>
        <div className="right_cent">
          <div className="right_one1">
            <ScrollBoard config={config1} />
          </div>
        </div>
        <div className="right_foot">
          <List title='实时警报'></List>
          <div className="right_two">
            <ScrollBoard config={config2} />
          </div>
        </div>
      </div>
      <div className="top"></div>
    </div>
  )
}

export default index